package com.tencent.compose.sample

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage
import composesample.composeapp.generated.resources.Res
import composesample.composeapp.generated.resources.image_cat
import org.jetbrains.compose.resources.ExperimentalResourceApi

@OptIn(ExperimentalResourceApi::class)
@Composable
fun IconOptionView(
    iconUrl: String,
    isSelected: Boolean,
    onClick: () -> Unit,
) {
    Box(
        modifier =
            Modifier.size(100.dp).clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() },
            ) {
                onClick()
            },
    ) {
        Column(
            modifier =
                Modifier
                    .clickable(
                        indication = null,
                        interactionSource = remember { MutableInteractionSource() },
                    ) {
                        onClick()
                    }.background(
                        if (isSelected) {
                            Color(0XFFF2FAFF)
                        } else {
                            Color(0xFFF1F3F8)
                        },
                    ).border(
                        1.dp,
                        if (isSelected) {
                            Color(0xFF0095FF)
                        } else {
                            Color(0xFFF1F3F8)
                        },
                    )
                    // 放到边框颜色后面否则圆角无颜色
                    .clip(RoundedCornerShape(6.dp)),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
//            Image(
//                bitmap = rememberLocalImage(Res.drawable.image_cat),
//                contentDescription = iconUrl,
//                modifier = Modifier.size(49.dp)
//                    .background(Color.Yellow)
//                    .padding(1.dp)
//            )
            println("asyncimage:$iconUrl" )

            AsyncImage(
                model = iconUrl,
                contentDescription = "",
                modifier =
                    Modifier
                        .size(49.dp)
                        .clip(RoundedCornerShape(50))
                        .clickable(
                            indication = null,
                            interactionSource = remember { MutableInteractionSource() },
                        ) {
                            onClick()
                        },
            )
        }
    }
}
